@xxx: red;
@bigSize: 30px;

.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.box {
  margin: 10px;
  .text1 {
    color: green;
  }
  .text2 {
    color: blueviolet;
  }
  .text3 {
    color: pink;
  }
  //   给所有后代都加上hover事件
  :hover {
    background-color: @xxx;
  }
  &_header {
    background-color: aqua;
  }
  &_footer {
    background-color: blue;
  }
  &_content {
    background-color: brown;
  }
}

:root {
  --mainColor: green;
}

.box2 {
  background-color: var(--mainColor);
  width: 200px;
  height: 200px;
}
